<template>
	<scroll-view scroll-y  class="video_main" @scrolltolower="handleToLower">
		<view class="content_wrap">
			<view class="video_item" v-for="item in videowp" :key="item._id" @click="handleGoVideo(item)">
				<image mode="widthFix" :src="item.img" ></image>
			</view>
		</view>
	</scroll-view>
</template>

<script>
	export default {
		props:{
			urlobj:Object
		},
		watch:{
			urlobj(){
				// 监视urlobj是否切换， 切换的话 数组清空在去请求数据
				this.videowp=[]
				this.getList()
				console.log(this.urlobj);
				
			}
		},
		data(){
			return{
				videowp:[],
				hasMore:true
			}
		},
		created() {
			console.log(this.urlobj);
			this.getList()
		},
		methods:{
			// 图片点击跳转到video
			handleGoVideo(item){
				// 1.将数据存到全局共享中
				getApp().globalData.video=item;
				// 2.页面跳转
				uni.navigateTo({
					url:"/pages/videoPlay/index"
				})
			},
			// 滑动到最底加载新数据
			handleToLower(){
				if(this.hasMore){
					this.urlobj.params.skip+=this.urlobj.params.limit;
					this.getList();
				}else{
					uni.showToast({
						title:"没有更多数据了",
						icon:"none"
					})
				}
			},
			getList(){
				this.request2({
					url:this.urlobj.url,
					data:this.urlobj.params
				}).then(result=>{
					console.log(result);
					// 如果没有更多的数据
					if(result.res.videowp.length===0){
						this.hasMore=false;
						uni.showToast({
							title:"没有更多数据了",
							icon:"none"
						})
						return;
					}
					this.videowp=[...this.videowp,...result.res.videowp]
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.video_main{
		// height:屏幕的高度(不同的手机高度不同，不能写死)-头部标题的高度  calc减号之间必须有空格
		// #ifdef H5
		height: calc( 100vh - 130px );
		// #endif
		
		// #ifndef H5
		height: calc( 100vh - 36px );
		// #endif
		.content_wrap{
			display: flex;
			flex-wrap: wrap;
			.video_item{
				width: 33.33%;
				border: 4rpx solid #FFFFFF;
				image{}
			}
		}
	}
</style>
